<template>
    <main>
		<section class="header flex">
            <p class="flex-1 flex-center">{{ message }}</p>
			<ul>
                <li><router-link class="btn-success" :to="{ name: 'BookAdd' }">添加图书</router-link></li>
				<li>
                    <router-link :to="{ name: $route.meta.title == '我的订单' ? 'OrderManager' : 'Order' }">
                        {{ $route.meta.title == '我的订单' ? '全部' : '我的' }}订单
                    </router-link>
                </li>
				<li>
                    <router-link :to="{ name: 'UserManager' }">用户管理</router-link>
                </li>
			</ul>
		</section>
        <Table>
            <template v-slot:thead>
                <th>ID</th>
                <th>图片</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>销量</th>
                <th>库存</th>
                <th>操作</th>
            </template>
            <tr v-for="item in bookList" :key="item.id">
                <th>{{ item.id }}</th>
                <td>
                    <MyImage :src="item.imgPath"></MyImage>
                </td>
                <td>{{ item.name }}</td>
                <td>{{ item.author }}</td>
                <td>{{ item.price }}</td>
                <td>{{ item.sales }}</td>
                <td>{{ item.stock }}</td>
                <td class="nowrap">
                    <router-link class="btn-primary" :to="{ name: 'BookUpdate', params: { id: item.id } }">修改</router-link>
                    <button class="btn-danger ml-10px" @click="deleteBook(item.id)">删除</button>
                </td>
            </tr>
        </Table>
        <Pagination v-if="!isDataEmpty" @pageTurn="pageTurn"
            :pageNo="pageNo" :pageSize="pageSize" :totalPage="totalPage" :totalCount="totalCount"></Pagination>
	</main>
</template>

<script>
    import Table from '../../components/Table.vue';
    import Pagination from '../../components/Pagination.vue';
    import bookService from '../../service/BookService';

    const LOADING_MESSAGE = '加载中......';
    const QUERY_NOT_RESULT = '未查询到数据';

    /**
     * 图书管理
     */
    export default {
        components: {
            Table, Pagination
        },
        data() {
            return {
                bookList: [],
                message: '',
                loading: false,     // 是否正在加载中
                /** 当前页码 */
                pageNo: 1,
                /** 页容量 */
                pageSize: 10,
                /** 总页数 */
                totalPage: 0,
                /** 数据总条数 */
                totalCount: 0
            }
        },
        computed: {
            isDataEmpty() {
                return this.bookList === null || this.bookList.length === 0;
            }
        },
        methods: {
            /**
             * 发起请求，获取图书数据
             */
            async getBookList(pageNo, pageSize, minPrice, maxPrice) {
                if (this.loading) {
                    return;
                }
                this.loading = true;
                this.message = LOADING_MESSAGE;
                this.bookList = [];
                const result = await bookService.getBookList(pageNo, pageSize, minPrice, maxPrice);
                if (result.totalCount == 0) {
                    this.message = QUERY_NOT_RESULT;
                } else {
                    this.bookList = result.data;
                    this.pageNo = result.pageNo;
                    this.totalPage = result.total;
                    this.totalCount = result.totalCount;
                    this.message = '';
                }
                this.loading = false;
            },
            /**
             * 翻页
             */
            pageTurn(pageNo) {
                this.getBookList(pageNo, this.pageSize);
            },
            /**
             * 删除图书
             */
            async deleteBook(id) {
                const result = await bookService.deleteBook(id);
                if (result.isSuccess) {
                    // 删除成功，重新获取当前页图书数据
                    this.getBookList(this.pageNo, this.pageSize);
                }
                this.message = result.message;
            },
        },
        created() {
            this.getBookList(1, this.pageSize);
        }
    }
</script>

<style lang="less" scoped>
    main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .header {
        p {
            font-weight: bold;
            color: #ff0000;
        }
        ul {
            display: flex;
            justify-content: end;
            padding: 5px 0;
            padding-right: 10px;
            align-items: center;
        }
        li {
            margin-left: 20px;
        }
    }
    main:deep(tbody  tr:nth-child(10)) {
        border-bottom: none;
    }
</style>